<template>
	<!-- 电梯实时监控/运行实时监控 -->
	<div class="operationBox heightMax publicbox " v-loading='loading'>
		<el-row :gutter="10">
			<el-col :span="5">
				<div class="colItem">
					<span class="font14 searchCode" style="width: 200px;">设备注册代码：</span>
					<el-input size="mini" @keyup.enter.native="getTableList(1)" placeholder="请输入设备代码" clearable v-model="marketingCode"></el-input>
				</div>
			</el-col>
			<el-col :span="4">
				<div class="colItem">
					<span class="font14 searchCode">在线情况：</span>
					<el-select size="mini" placeholder="请选择在线情况" clearable v-model="facility">
						<el-option v-for="item in facilityArr" :value="item.value" :key="item.value" :label="item.label"></el-option>
					</el-select>
				</div>
			</el-col>
			<el-col :span="4">
				<div class="colItem">
					<span class="font14 searchCode">使用位置：</span>
					<el-input size="mini" @keyup.enter.native="getTableList(1)" placeholder="请输入使用位置" clearable v-model="employ"></el-input>
				</div>
			</el-col>
			<el-col :span="4">
				<div class="colItem">
					<span class="font14 searchCode">外设编号：</span>
					<el-input size="mini" @keyup.enter.native="getTableList(1)" placeholder="请输入外设编号" clearable v-model="codeWai"></el-input>
				</div>
			</el-col>
			<el-col :span="3">
				<div class="colItem">
					<span class="font14 searchCode" style="width: 110px;">关注：</span>
					<el-select size="mini" placeholder="请选择关注情况" clearable v-model="fllowValue">
						<el-option v-for="item in fllowValueArr" :value="item.value" :key="item.value" :label="item.label"></el-option>
					</el-select>
				</div>
			</el-col>
			<!-- <el-button type="primary" icon="el-icon-arrow-down" size="mini">更多条件</el-button> -->
			<el-button type="primary" icon="el-icon-search" @click='getTableList(1)' class='fl' size="mini">搜索</el-button>
			<el-button icon="el-icon-delete" @click='reset' class='fl' size="mini">重置</el-button>
			<!-- <el-button type="primary" icon="el-icon-download" size="mini" class='fl'>导出全部</el-button> -->
		</el-row>
	<!-- 	<el-row :gutter="10">
			<el-col :span='1.5'>
				<el-button type="primary" size="mini" class="fl" :disabled="!isGuanZhu || choseRowData.length != 1" @click='fllowClick(1)'>加关注</el-button>
			</el-col>
			<el-col :span='1.5'>
				<el-button type="primary" size="mini" class="fl" :disabled="isGuanZhu || choseRowData.length != 1" @click='fllowClick(0)'>取消关注</el-button>
			</el-col>
		
		</el-row> -->
		<el-row :gutter="10">
			<el-col :span='1.5'>
				<el-button type="primary" size="mini" class="fl" :disabled="moreliftReadBtnDis" @click='moreLiftReadClick'>多梯巡视</el-button>
			</el-col>
		</el-row>
		<div class="listName">
			<i></i><span class="font14">电梯列表</span>
		</div>
		<!-- 表格 -->
		<div class="tableBox">
			<vueScroll>
				<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @select-all="selectChange"
				 @selection-change="selectChange" style="width: 100%" border header-row-class-name='tableHeader' :row-key='getKey'>
					<el-table-column type="index" min-width="50" fixed>
					</el-table-column>
					<el-table-column type="selection" min-width="50" :reserve-selection='true' fixed>
					</el-table-column>
					<!-- <el-table-column label="关注">
						<template slot-scope="scope" class="degb">
							<div slot="reference" class="name-wrapper">
								<el-badge :value="scope.row.fllowType" class="item" type="success">
								</el-badge>
							</div>
						</template>
					</el-table-column> -->
					<el-table-column label="出厂编号" max-width="150">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.manufacturer_number_elevator" placement="top">
								<span class="speSpan">{{scope.row.manufacturer_number_elevator}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="使用位置" max-width="150">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.address" placement="top">
								<span class="speSpan">{{scope.row.address}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="使用单位" max-width="150">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.property_company_name" placement="top">
								<span class="speSpan">{{scope.row.property_company_name}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="制造单位" max-width="150">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.product_company_name" placement="top">
								<span class="speSpan">{{scope.row.product_company_name}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="维保单位" max-width="150">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.maintain_company_name" placement="top">
								<span class="speSpan">{{scope.row.maintain_company_name}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="注册代码" max-width="150">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.e" placement="top">
								<span class="speSpan">{{scope.row.e}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="外设编号" max-width="150">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.o" placement="top">
								<span class="speSpan">{{scope.row.o}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="在线状态" max-width="150">
						<template slot-scope="scope">
							<span class="eleBlueColor" v-if="scope.row.is_online">在线</span>
							<span class="elInfoColor" v-else>离线</span>
						</template>
					</el-table-column>
					<!-- 	<el-table-column label="企业平台" max-width="150">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.company_platform" placement="top">
								<span class="speSpan">{{scope.row.company_platform}}</span>
							</el-tooltip>
						</template>
					</el-table-column> -->
					<el-table-column label="接入时间" max-width="150">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.update_time" placement="top">
								<span class="speSpan">{{scope.row.update_time}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="查看详情" max-width="150">
						<template slot-scope="scope">
							<span class="eleBlueColor cursor" @click="lookDetail(scope.row.id,scope.row.e,scope.row.button_display,scope.row.surl)">查看</span>
						</template>
					</el-table-column>
					<!-- <el-table-column label="请求监控" max-width="150">
						<template slot-scope="scope">
							<el-button type="primary" size="mini" @click='sendDayBook(scope.row.e)' :disabled="scope.row.button_display !== '1'">发送</el-button>
						</template>
					</el-table-column> -->
				</el-table>
				<!-- 分页器 -->
				<div class="pag">
					<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
					 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</vueScroll>
		</div>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
	} from "@/common.js";
	export default {
		activated() {
			if(!this.newFlag){
				this.firstMethods()
			}
		},
		mounted() {
			this.firstMethods()
			this.getTableList()
			this.getPermition()
		},
		data() {
			return {
				marketingCode: '',
				facility: '',
				employ: '',
				facilityArr: [{
						value: 1,
						label: '在线'
					},
					{
						value: 0,
						label: '离线'
					},
				],
				tableData: [],
				page: 1,
				page_size: 10,
				total: 100,
				codeWai: '',
				loading: true,
				pidsArr: [],
				addBtnShow: false,
				complieBtnShow: false,
				deleteBtnShow: false,
				readDataShow: false,
				moreliftReadBtnDis: true,
				choseRowData: [],
				tableListId: [],
				isGuanZhu: true,
				fllowValue: '',
				newFlag:true,
				fllowValueArr: [{
					label: '已关注',
					value: 1
				}, {
					label: '其他',
					value: 0
				},{
					label: '全部',
					value: 2
				}],
			}
		},
		computed: {
			yunXingArr() {
				if (localStorage.jianKong) {
					let arr = JSON.parse(localStorage.jianKong).list
					return arr.filter((item) => {
						return item.name == '单梯监控查看'
					})
				} else {
					return []
				}
			}
		},
		methods: {
			firstMethods() {
				if (localStorage.searchOperationMonitoring) {
					this.fllowValue = ''
					this.marketingCode = ''
					this.facility = ''
					this.employ = ''
					this.codeWai = ''
					this.page = 1
					this.page_size = 10
					let id = JSON.parse(localStorage.searchOperationMonitoring).id
					if (id == 1) {
						this.fllowValue = 1
					} else if (id == 2) {
						this.facility = 1
					} else if (id == 3) {
						this.facility = 0
					}
					localStorage.removeItem('searchOperationMonitoring')
					this.getTableList()
				}
			},
			fllowClick(val) {
				let mess = ''
				if (val == 1) {
					mess = '添加关注'
				} else {
					mess = '取消关注'
				}
				let data = {
					id: this.tableListId[0],
					follow: val
				}
				this.$confirm(`此操作将${mess}, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axiosPost('/manu/elevator/follow/', data, (res) => {
						if (res.code == 0) {
							this.$refs.moviesTable.clearSelection()
							this.$message.success('操作成功')
							this.getTableList()
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}).catch(() => {

				});
			},
			getKey(row) {
				return row.id
			},
			moreLiftReadClick() {
				if (this.choseRowData.length > 5) {
					this.$message.info('多梯巡视电梯数最多为5台')
				} else {
					if (this.choseRowData.length > 1) {
						console.log('多电梯查看')
						localStorage.moreLiftIdList = JSON.stringify({
							ids: this.tableListId
						})
					} else {
						console.log('直接查看')
						localStorage.moreLiftIdList = JSON.stringify({
							ids: [this.tableListId[0]]
						})
					}
					let obj = {
						newLabel: '多梯巡视监视详情',
						index: '/MainView/RealTimeElevatorMonitoring/HowTheElevatorDetail',
					}
					this.$store.commit('ADDTAB', obj)
					this.$router.push({
						name: 'HowTheElevatorDetail'
					})
				}
			},
			//对接日志
			sendDayBook(code) {
				if (code) {
					let data = {
						register_code: code
					}
					axiosGet('/manu/elevator/request/', data, (res) => {
						// if (res.code == 0) {
						// 	this.$message.info(res.detail.msg)
						// } else {
						// 	this.$message.error(res.detail.result)
						// }
					})
				} else {
					this.$message.info('电梯注册代码不能为空，请联系管理员')
				}
			},
			getPermition() {
				if (this.yunXingArr.length != 0) {
					if (this.yunXingArr[0].pids) {
						this.pidsArr = this.yunXingArr[0].pids
					}
				}
				if (this.pidsArr.length > 0) {
					this.pidsArr.map((item) => {
						if (item.desc == 'get') {
							this.readDataShow = true
						}
						if (item.desc == 'put') {
							this.complieBtnShow = true
						}
						if (item.desc == 'delete') {
							this.deleteBtnShow = true
						}
						if (item.desc == 'post') {
							this.addBtnShow = true
						}
					})
				}
			},
			//重置搜索
			reset() {
				this.$refs.moviesTable.clearSelection()
				this.fllowValue = ''
				this.marketingCode = ''
				this.facility = ''
				this.employ = ''
				this.codeWai = ''
				this.page = 1
				this.page_size = 10
				this.getTableList()
			},
			//查看详情
			lookDetail(id, register_code, button_display,surl) {
				let obj = {
					newLabel: '运行实时监控详情',
					index: '/MainView/RealTimeElevatorMonitoring/MonitoringDetails',
				}
				if(surl){
					localStorage.surl = JSON.stringify({url:surl})
				}else{
					if (localStorage.surl) {
						localStorage.removeItem('surl')
					}
				}
				localStorage.liftDetailId = JSON.stringify({
					id: id
				})
				localStorage.register_code = JSON.stringify({
					id: register_code
				})
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'MonitoringDetails',
				})
				// if (register_code && button_display === '1') {
				// 	let data = {
				// 		register_code: register_code
				// 	}
				// 	axiosGet('/manu/elevator/request/', data, (res) => {
				// 		if (res.code == 0) {

				// 		} else {
				// 			this.$message.error(res.detail.result)
				// 		}
				// 	})
				// }
			},
			//获取表格数据
			getTableList(val) {
				if (val) {
					this.page = 1
					this.page_size = 10
				}
				if(this.attentionStatus == 2){
					this.attentionStatus = ''
				}
				this.loading = true
				let params = {
					page: this.page,
					page_size_count: this.page_size,
					e: this.marketingCode,
					is_online: this.facility,
					address: this.employ,
					o: this.codeWai,
					follow: this.fllowValue
				}
				axiosGet('/manu/elevator/', params, (res) => {
					console.log(res)
					this.newFlag = false
					if (res.code == 0) {
						this.total = res.detail.count
						this.tableData = res.detail.results
						this.tableData.map((item) => {
							item.fllowType = item.follow ? '✔' : ''
						})
					} else {
						this.$message({
							type: 'error',
							message: res.detail.result
						})
					}
					this.loading = false
				})
			},
			//表格
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			selectChange(res) {
				console.log(res)
				this.tableListId = res.map((item) => {
					return item.id
				})
				this.choseRowData = res
				if (res.length != 0) {
					this.moreliftReadBtnDis = false
					if (res.length == 1) {
						if (res[0].follow) {
							this.isGuanZhu = false
						} else {
							this.isGuanZhu = true
						}
					}
				} else {
					this.isGuanZhu = true
					this.moreliftReadBtnDis = true
				}
			},
			//分页器
			handleSizeChange(size) {
				this.page_size = size
				this.getTableList()
			},
			handleCurrentChange(page) {
				this.page = page
				this.getTableList()
			}
		},
	}
</script>

<style scoped lang="less">
	.colItem {
		display: flex;
		flex-direction: row;

		.searchCode {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 120px;
		}
	}

	.tableBox {
		height: 80%;
		overflow-y: auto;
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
		}

	}
</style>
